<template>
    <div>
        <ul class="song-list">

            <li  v-for="(item,index) in songlist1" :key="index" @click="changeUrl(item)">

                   <div>
                       <img :src="item.billboard.pic_s192" alt="">
                   </div>

                <div>
                        <p v-for="(item1,index) in item.song_list" :key="index"><span>{{index+1}}</span> {{item1.title}}</p>
                </div>

            </li>

        </ul>
    </div>
</template>

<script>
    import {getSongList} from "../api/api";

    export default {
        name: "songList",
        data(){
            return{
                type:['1','2','11','12','16','21','22','23','24','25'],
                songlist1:[]
            }
        },
        created() {
            for (const item of this.type){
                getSongList(item,3).then(res=>{
                    // console.log(res)
                    if (res.song_list) {
                        this.songlist1.push(res);
                    }
                })
            }
        },
        methods:{
            changeUrl(item){
                this.$router.push('listDetail?type='+item.billboard.billboard_type+'')
            }
        }
    }
</script>

<style lang="less" scoped>
.song-list {
    li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        align-items: center;
        img {
            width: 100px;
            height: 100px;
        }
        div:nth-child(2) {
            width: calc(100% - 100px);
            padding: 0px 10px;
        }
        p {

        }

    }
}
</style>